<template>
    <view class="login-container">
        <!-- <view class="logo-box">
            <view class="logo-placeholder"></view>
        </view> -->
        <view class="title">欢迎登录</view>
        <view class="subtitle">请使用微信账号登录</view>
        <button class="login-btn" @click="wxLogin">
            <image class="wechat-icon" src="/static/images/wechat.png" mode="aspectFit"></image>
            微信一键登录
        </button>
    </view>
</template>

<script>
import api from '@/api/index.js';

export default {
    data() {
        return {
            loading: false,
            sessionId: uni.getStorageSync('sessionId') || '',
            userInfo: {}
        }
    },
    methods: {
        // 设置sessionId
        setSessionId(sessionId) {
            this.sessionId = sessionId;
            uni.setStorageSync('sessionId', sessionId);
        },

        // 设置用户信息
        setUserInfo(userInfo) {
            try {
                uni.setStorageSync('userInfo', userInfo);
            } catch (e) {
                console.error('保存用户信息失败:', e);
            }
        },

        // 初始化应用
        init() {
            uni.reLaunch({
                url: '/pages/user/user'
            });
        },

        async wxLogin() {
            if (this.loading) return;
            this.loading = true;
            
            try {
                // 1. 获取登录code
                const loginRes = await uni.login({
                    provider: 'weixin'
                });
                console.log('获取code成功:', loginRes.code);
                
                // 2. 发送登录请求
                const responseData = await api.user.login(loginRes.code);
                console.log('登录返回的完整数据:', responseData);
                
                // 检查返回的数据结构
                if (responseData) {
                    console.log('登录返回数据结构:', {
                        code: responseData.code,
                        msg: responseData.msg,
                        data: responseData.data
                    });
                }
                
                // 修改判断条件：只判断code===1和data存在即可，不需要判断token
                if (responseData && responseData.code === 1 && responseData.data) {
                    console.log('进入登录成功分支');
                    // 保存token
                    if (responseData.data.token) {
                        uni.setStorageSync('token', responseData.data.token);
                    }
                    // 保存用户信息
                    this.setUserInfo(responseData.data);
                    // 保存openid
                    if (responseData.data.openid) {
                        uni.setStorageSync('openid', responseData.data.openid);
                        console.log('保存openid成功:', responseData.data.openid);
                    }
                    
                    uni.showToast({
                        title: '登录成功',
                        icon: 'success'
                    });
                    
                    setTimeout(() => {
                        this.init();
                    }, 1500);
                } else {
                    console.log('进入登录失败分支');
                    console.log('判断条件详情:',{
                        'responseData存在': !!responseData,
                        'code等于1': responseData?.code === 1,
                        'data存在': !!responseData?.data
                    });
                    uni.showToast({
                        title: responseData?.msg || '登录失败',
                        icon: 'none'
                    });
                }
            } catch (error) {
                console.error('登录失败:', error);
                uni.showToast({
                    title: '登录失败',
                    icon: 'none'
                });
            } finally {
                this.loading = false;
            }
        }
    }
}
</script>

<style>
.login-container {
    min-height: 100vh;
    background: linear-gradient(135deg, #6176d3 0%, #8c5791 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40rpx;
    position: relative;
    overflow: hidden;
}

.login-container::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
    animation: rotate 20s linear infinite;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.title {
    font-size: 56rpx;
    font-weight: bold;
    color: #ffffff;
    margin-top: 120rpx;
    margin-bottom: 20rpx;
    text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
    animation: fadeInDown 0.8s ease-out;
}

.subtitle {
    font-size: 32rpx;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 120rpx;
    animation: fadeInUp 0.8s ease-out 0.2s;
    animation-fill-mode: both;
}

.login-btn {
    width: 80%;
    height: 96rpx;
    background: #ffffff;
    color: #07C160;
    border-radius: 48rpx;
    font-size: 34rpx;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.15);
    border: none;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    animation: fadeInUp 0.8s ease-out 0.4s;
    animation-fill-mode: both;
}

.login-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.2), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.login-btn:active {
    transform: scale(0.98);
    box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.1);
}

.login-btn:active::after {
    transform: translateX(100%);
}

.wechat-icon {
    width: 40rpx;
    height: 40rpx;
    margin-right: 16rpx;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20rpx);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20rpx);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
</style>